/** *
 * {type :1 , title:'项目名称',bind:[{ required: true, message: '项目名称不得为空' }]},
 * tyoe    1 : 输入框  2: 数字框    3 日期选择框    4  文本textarea
 * bind 有则是必填,需要添加失败信息   无则不需要
 */


import {defineComponent, ref, computed, watch, watchEffect,reactive} from 'vue';
import {useDraggable} from '@vueuse/core';
function formatNumber(value) {
    value += '';
    const list = value.split('.');
    const prefix = list[0].charAt(0) === '-' ? '-' : '';
    let num = prefix ? list[0].slice(1) : list[0];
    let result = '';

    while (num.length > 3) {
        result = `,${num.slice(-3)}${result}`;
        num = num.slice(0, num.length - 3);
    }

    if (num) {
        result = num + result;
    }

    return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
}
export default defineComponent({
    props:{
        formList:Array
    },
    setup() {
        const visible = ref(false);
        const modalTitleRef = ref(null);
        const  popTitle = ref('')
        const showModal = (item) => {
            popTitle.value = item
            visible.value = true;
        };
        const {
            x,
            y,
            isDragging,
        } = useDraggable(modalTitleRef);

        const handleOk = e => {
            console.log(e);
            // visible.value = false;
        };
        const close = e => {
            visible.value = false;
        };

        const startX = ref(0);
        const startY = ref(0);
        const startedDrag = ref(false);
        const transformX = ref(0);
        const transformY = ref(0);
        const preTransformX = ref(0);
        const preTransformY = ref(0);
        watch([x, y], () => {
            if (!startedDrag.value) {
                startX.value = x.value;
                startY.value = y.value;
                preTransformX.value = transformX.value;
                preTransformY.value = transformY.value;
            }

            startedDrag.value = true;
        });
        watch(isDragging, () => {
            if (!isDragging) {
                startedDrag.value = false;
            }
        });
        watchEffect(() => {
            if (startedDrag.value) {
                transformX.value = preTransformX.value + x.value - startX.value;
                transformY.value = preTransformY.value + y.value - startY.value;
            }
        });
        const transformStyle = computed(() => {
            return {
                transform: `translate(${transformX.value}px, ${transformY.value}px)`,
            };
        });
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 24,
                },
                sm: {
                    span: 8,
                },
            },
            wrapperCol: {
                xs: {
                    span: 24,
                },
                sm: {
                    span: 16,
                },
            },
        };
        const config = {
            rules: [{
                type: 'string',
                required: true,
                message: 'Please select time!',
            }],
        };
        const formState = reactive({});

        const onFinish = values => {
            console.log('Success:', values, formState);
        };

        const onFinishFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };
        return {
            formState,
            onFinish,
            onFinishFailed,
            formItemLayout,
            config,
            visible,
            showModal,
            handleOk,
            close,
            popTitle,
            modalTitleRef,
            transformStyle,
        };
    },

});